<template>
  <!-- 榜单 -->
  <div class="n-bill">
    <div class="n-hd">
      <router-link to="/discover/toplist" class="n-title">榜单</router-link>
      <span class="more">
        <router-link to="/discover/toplist">更多</router-link><em class="more-arrow"></em
      ></span>
    </div>
    <div class="bilist">
      <dl class="billdl" v-for="(item, index) in billList" :key="index" :class="'billdl' + index">
        <dt class="top">
          <div class="bill-cover">
            <img :src="item.playlist.coverImgUrl + '?param=100y100'" alt="" />
            <router-link :to="'/discover/toplist?' + item.playlist.id" class="msk"></router-link>
            <!-- <a href="" class="msk"></a> -->
          </div>
          <div class="tit">
            <router-link :to="'/discover/toplist?' + item.playlist.id" :title="item.playlist.name"
              ><h3>{{ item.playlist.name }}</h3></router-link
            >
            <div class="btn">
              <a
                href="javascript:void(0);"
                class="btn-play"
                title="播放"
                @click.prevent="setSongList(item.playlist.id)"
              ></a
              ><a
                href="javascript:;"
                class="btn-coll"
                title="收藏"
                @click="operationClick"
              ></a>
            </div>
          </div>
        </dt>
        <dd>
          <ol>
            <li v-for="i in 10" :key="item.playlist.tracks[i - 1].id">
              <span class="no" :class="i - 1 <= 2 ? 'no-top' : ''">{{ i }}</span>
              <router-link
                :to="'/song?id=' + item.playlist.tracks[i - 1].id"
                :title="item.playlist.tracks[i - 1].name"
                class="song-name"
                >{{ item.playlist.tracks[i - 1].name }}</router-link
              >
              <div class="oper">
                <a
                  href="javascript:;"
                  class="play"
                  @click="playSong(item.playlist.tracks[i - 1])"
                ></a
                ><a
                  href="javascript:;"
                  class="addList u-icn"
                  @click="addList(item.playlist.tracks[i - 1])"
                ></a
                ><a
                  href="javascript:;"
                  class="coll"
                  @click="operationClick"
                ></a>
              </div>
            </li>
            <li class="more">
              <router-link to="/discover/toplist">查看全部></router-link>
            </li>
          </ol>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { playList } from '@/api/playlist.js'
import { operationClick } from '@/utils/methods.js'
export default {
  data() {
    return {
      // 榜单id
      listId: [19723756, 3779629, 2884035],
      // 榜单数据
      billList: []
    }
  },
  methods: {
    // 获取榜单排行数据
    getBillList() {
      Promise.allSettled(this.listId.map(id => playList(id))).then(res => {
        this.billList = res.map(list => {
          return list.value.data
        })
      })
    },
    // 更换歌单的播放列表
    setSongList(id) {
      const data = this.billList.find(list => {
        return list.playlist.id === id
      })
      const tracks = data.playlist.tracks
      this.$store.commit('Music/setplayerSettingIndex', 0)
      this.$store.commit('Music/setSongList', tracks)
    },
    // 追加音乐到播放列表-播放
    playSong(list) {
      const songList = this.$store.state.Music.songList
      const index = songList.findIndex(item => {
        return item.id === list.id
      })
      console.log(list)
      this.$store.commit('Music/pushSongList', list)
      this.$store.commit('Music/setplayerSettingIndex', index)
    },
    // 追加音乐到播放列表不播放
    addList(list) {
      this.$store.commit('Music/pushSongList', list)
    },
    operationClick
  },
  created() {
    // 获取榜单排行数据
    this.getBillList()
  }
}
</script>

<style lang="less" scoped>
@import './billlist.less';
</style>
